<template>
  <div class="shopping">
    <div class="shopping-top">
      <div class="kong">
        <div class="top-kong">
          <van-empty
            class="custom-image"
            image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
            description="描述文字"
          />
        </div>
        <div class="top-tiaozhuan" @click="JumpCategory">去逛逛</div>
      </div>
    </div>

    <div class="shopping-title">———为你推举———</div>
    <div class="shopping-footer">
      <div
        class="footer-itme"
        v-for="(item, index) in Shingin.data"
        :key="index"
      >
        <div class="item-img">
          <img class="auto-img" :src="item.img" alt="" />
        </div>
        <div class="item-content">{{ item.title }}</div>
        <div class="item-price">&yen;{{ item.price_sale }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Shingin from "../../public/json/Shingin.json";
export default {
  name: "Shopping",
  data() {
    return {
      Shingin,
    };
  },
  created() {
  },
  methods: {
    JumpCategory(){
      this.$router.push({name:"Category"});
    }
  },
};
</script>

<style lang="scss" scoped>
.top-tiaozhuan {
  height: 30px;
  width: 100px;
  border: 2px solid #e4393c;
  color: #e4393c;
  text-align: center;
  line-height: 30px;
  margin: 0 auto;

}
.shopping-top {
  width: 100%;
  background-color: white;
  padding-bottom: 50px;
}
.shopping-title {
  width: 100%;
  height: 35px;
  text-align: center;
  line-height: 35px;
  font-size: 16px;
  font-weight: bold;
}
.item-price {
  font-size: 16px;
  margin-top: 5px;
  color: #e4393c;
}
.item-content {
  font-size: 16px;
  font-weight: bold;
}
.footer-itme {
  width: calc(50% - 10px);
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
}

.shopping-footer {
  display: flex;
  width: 100%;
  padding: 10px;
}

.shopping {
  background-color: #f6f6f7;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}
</style>